// ------------------------------------------------------------
// Base: Mixin
// ------------------------------------------------------------
@mixin max-screen($width) {
    @media only screen and (max-width: $width) {
        @content;
    }
}
@mixin min-screen($width) {
    @media only screen and (min-width: $width) {
        @content;
    }
}

@mixin fn-box-sizing($boxmodel) {
    -webkit-box-sizing: $boxmodel;
       -moz-box-sizing: $boxmodel;
            box-sizing: $boxmodel;
}

@mixin fn-border-radius($radius:0) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
@mixin fn-border-top-radius($radius) {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
}
@mixin fn-border-right-radius($radius) {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
}
@mixin fn-border-bottom-radius($radius) {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
}
@mixin fn-border-left-radius($radius) {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
}

@mixin fn-box-shadow($shadow...) {
    @if length($shadow) < 1 {
        $shadow: none;
    }
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

@mixin fn-background-size($size) {
    -webkit-background-size: $size;
    -moz-background-size: $size;
    background-size: $size;
}

@mixin fn-center-block() {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@mixin fn-clearfix() {
    &:before,
    &:after {
        display: table;
        content: " ";
    }
    &:after {
        clear: both;
    }
}

// WebKit-style focus
@mixin fn-tab-focus() {
    // WebKit-specific. Other browsers will keep their default outline style.
    // (Initially tried to also force default via `outline: initial`,
    // but that seems to erroneously remove the outline in Firefox altogether.)
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

// Placeholder text
@mixin fn-placeholder($color: $input-color-placeholder) {
    &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
    &:-moz-placeholder { color: $color; } // Firefox4-18
    &::-moz-placeholder { color: $color; opacity: 1; } // Firefox
    &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
}

// Transitions
@mixin fn-transition($transition...) {
    -webkit-transition: $transition;
       -moz-transition: $transition;
         -o-transition: $transition;
            transition: $transition;
}

// Transform
@mixin fn-transform($transform...) {
	-webkit-transform: $transform;
       -moz-transform: $transform;
        -ms-transform: $transform;
		 -o-transform: $transform;
            transform: $transform;
}

// User select
// For selecting text on the page
@mixin fn-user-select($select) {
    -webkit-user-select: $select;
       -moz-user-select: $select;
        -ms-user-select: $select; // IE10+
            user-select: $select;
}

@mixin fn-opacity-compatible($opacity) {
    -webkit-opacity: $opacity;
    -moz-opacity: $opacity;
    -khtml-opacity: $opacity;
    opacity: $opacity;
    // IE8 filter
    $opacity-ie: ($opacity * 100);
    filter: alpha(opacity=$opacity-ie);
}
@mixin fn-opacity($opacity) {
    opacity: $opacity;
}

@mixin fn-tbl {
    display: table !important;
    width: 100%;
    table-layout: fixed;
}
@mixin fn-tblcell {
    display: table-cell !important;
    position: relative;
	/*
    width: 100%;
    height: 100%;
	*/
    vertical-align: middle;
}
@mixin fn-text-ellipsis {
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

@mixin fn-hide-text() {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}
@mixin fn-text-hide() {
    @include fn-hide-text;
}

// Form control focus state
@mixin form-control-focus($color: $input-border-color-focus) {
    $color-rgba: rgba(red($color), green($color), blue($color), .6);
    &:focus {
        border-color: $color;
        outline: 0;
        @include fn-box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
    }
}

@mixin fn-button-variant($color, $background, $border-color) {
    background-color: $background;
    border-color: $border-color;
    color: $color;

    &:focus, 
    &.focus {
        background-color: darken($background, 10%);
        border-color: darken($border-color, 25%);
        color: $color;
    }
    &:hover {
        background-color: darken($background, 10%);
        border-color: darken($border-color, 12%);
        color: $color;
    }
    
    &:active, 
    &.active, 
    .open > &.dropdown-toggle {
        background-color: darken($background, 10%);
        border-color: darken($border-color, 12%);
        color: $color;
        
        &:hover, 
        &:focus, 
        &.focus {
            background-color: darken($background, 17%);
            border-color: darken($border-color, 25%);
            color: $color;
        }
    }
  
    &:active, 
    &.active, 
    .open > &.dropdown-toggle {
        background-image: none;
    }
  
    &.disabled, 
    &[disabled], 
    fieldset[disabled] & {
        &:hover, 
        &:focus, 
        &.focus {
            background-color: $background;
            border-color: $border-color;
        }
    }

    .badge {
        background-color: $color;
        color: $background;
    }
}

// Button sizes
@mixin fn-button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    line-height: $line-height;
    font-size: $font-size;
    @include fn-border-radius($border-radius);
}

// ------------------------------------------------------------
// Base: Function Methods
// ------------------------------------------------------------
//去掉一个值的单位，如12px => 12
@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}
a{
	text-decoration: none;
	&:hover{
		text-decoration: none !important;
	}
	&:active{
		text-decoration: none !important;
	}
	&:visited{
		text-decoration: none !important;
	}
}